<template>
	<view>
		<view class="refundMsg">
			<view class="refundMsg-img">
				<image src="../../../static/images/banner/banner01.jpg" mode=""></image>
			</view>
			<view class="refundMsg-detail">
				<view class="refundMsg-detail-title">{{refundData.title}}</view>
				<view class="refundMsg-detail-number">x {{refundData.num}}</view>
				<view class="refundMsg-detail-money">￥{{refundData.tprice}}</view>
			</view>
		</view>
		<view class="refundReason">
			退款数量:
			<text>x{{refundData.num}}</text>
		</view>

		<view class="refundDetail">
			<view class="refundDetail1">
				<text>申请金额：</text>
				<view class="">
					￥<text>{{refundData.tprice}}</text>
				</view>
			</view>
			<view class="refundDetail2"><text>申请说明：</text><textarea placeholder="请填写申请说明,以方便工作人员更好的处理售后问题" id=""
					cols="30" rows="10" v-model="refundCause"></textarea>
			</view>
		</view>
		<view class="refundBotton">
			<button class="cancel" @click="backPage">取消</button>
			<button class="bottom" @click="RefundSubmit1">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		RefundSubmit
	} from '@/api/system/order.js'
	export default {
		data() {
			return {
				refundData: {},
				refundCause: '',

			};
		},
		methods: {
			RefundSubmit1() {
				if (this.refundCause == '') return this.$modal.msg(
					'请填写退款原因')
				const data = {
					oid: this.refundData.oid,
					reason: this.refundCause
				}
				this.$modal.confirm('是否提交退款').then(res => {
					if (res == true) {
						RefundSubmit(data).then(res => {
							if (res.code == 200) {
								this.$modal.msgSuccess('提交成功')
								setTimeout(() => {
									this.$tab.redirectTo('/pages/mine/refund/refundOrder')
								}, 500)
							} else {
								this.$modal.msgError(res.msg)
							}
						})
					}
				})

			},
			backPage() {
				this.$tab.navigateBack()
			},
		},
		onLoad(data) {
			this.refundData = JSON.parse(data.data)
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #65A8F2;
		font-family: PingFangSC-regular;
		margin: 0;
		padding: 0;
	}

	.refundMsg {
		width: 670rpx;
		height: 20vh;
		margin: 20rpx auto;
		display: flex;
		border-radius: 20rpx;
		background-color: #fff;
		justify-content: space-between;

		.refundMsg-img {
			width: 300rpx;
			height: 17vh;
			margin: 20rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 30rpx;
			}
		}
	}

	.refundMsg-detail {
		width: 330rpx;
		height: 17vh;
		padding-right: 68rpx;

		.refundMsg-detail-title {
			width: 100%;
			height: 4vh;
			line-height: 4vh;
			font-size: 36rpx;
			margin: 3vh 0 0;
			text-align: right;
		}

		.refundMsg-detail-number {
			width: 100%;
			height: 3vh;
			line-height: 3vh;
			margin: 4vh 0 10rpx;
			color: rgba(16, 16, 16, 1);
			font-size: 28rpx;
			text-align: right;
		}

		.refundMsg-detail-money {
			width: 100%;
			height: 3vh;
			line-height: 3vh;
			text-align: right;
			color: rgba(255, 15, 0, 1);
			font-size: 36rpx;
		}
	}

	.refundReason {
		display: flex;
		justify-content: space-between;
		padding: 34rpx 28rpx 0 14rpx;
		margin: auto;
		width: 670rpx;
		height: 108rpx;
		border-radius: 20rpx;
		color: rgba(16, 16, 16, 1);
		font-size: 32rpx;
		font-weight: 700;
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
		border: 1px solid rgba(187, 187, 187, 1);

	}

	.refundDetail {
		margin: 30rpx auto 0;
		width: 670rpx;
		height: 410rpx;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, 1);
		border: 1px solid rgba(187, 187, 187, 1);

		text {
			font-weight: 700;
		}

		.refundDetail1 {
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			border-bottom: 2rpx solid black;
			height: 7vh;
			line-height: 7vh;
			font-size: 32rpx;
			color: rgba(16, 16, 16, 1);

			view {

				color: rgba(255, 15, 0, 1);
				font-size: 36rpx;
			}
		}

		.refundDetail2 {
			padding: 0 20rpx;
			line-height: 7vh;
			font-size: 32rpx;
			color: rgba(16, 16, 16, 1);

			textarea {
				width: 570rpx;
				height: 208rpx;
				padding: 10rpx;
				color: rgba(136, 136, 136, 1);
				font-size: 28rpx;
				line-height: 28rpx;
				font-family: Microsoft Yahei;
				border: 1px solid rgba(187, 187, 187, 1);
				margin-left: 30rpx;
			}
		}

	}

	.refundBotton {
		display: flex;
		justify-content: space-around;
		margin-top: 24rpx;

		button {
			width: 248rpx;
			height: 6vh;
			border-radius: 20rpx;
			font-size: 28rpx;
		}

		.cancel {
			background-color: rgba(255, 255, 255, 1);
			color: rgba(144, 141, 141, 1);
		}

		.bottom {
			background-color: rgba(234, 107, 107, 1);
			color: rgba(255, 255, 255, 1);
		}
	}

	//组件样式

	::v-deep .uni-numbox-btns {
		border: 1px solid rgba(232, 232, 232, 1);
		width: 50rpx;
	}
</style>
